<template>
  <div>
    <select v-if="type == 'font'" v-model="reactValue">
      <option value="黑体">黑体</option>
      <option value="宋体">宋体</option>
      <option value="华文细黑">华文细黑</option>
      <option value="Arial">Arial</option>
      <option value="sans-serif">sans-serif</option>
      <option value="Microsoft YaHei">Microsoft YaHei</option>
      <option value="Lucida Sans Regular">Lucida Sans Regular</option>
      <option value="Times New Roman">Times New Roman</option>
      <option value="Times">Times</option>
      <option value="monospace">monospace</option>
      <option value="Courier New">Courier New</option>
    </select>

    <input v-else-if="inputTypes.color.includes(type)" type="color" v-model="reactValue" />

    <input v-else-if="inputTypes.checkbox.includes(type)" type="checkbox" v-model="reactValue" />

    <div v-else-if="type == 'url'">
      <button class="btn" @click="onImgFileChange" style="margin-top: 10px">
        {{ reactValue ? "更改" : "选择" }}图片
      </button>
      <!-- <div :style="`background-image:url(${reactValue})`" class="sel_img"></div> -->
      <img :src="reactValue" alt="" class="sel_img">
    </div>

    <input v-else :type="inputType" v-model="reactValue" :placeholder="`请输入 ${type.toUpperCase()}`" />
  </div>
</template>

<script setup>
import { computed, reactive } from "vue";
import FilePicker from "file-picker-tiny";

let { type, formValue } = defineProps({
  type: {
    type: String,
    required: true,
  },
  formValue: {
    type: [String, Number],
    required: true,
  },
});
const emit = defineEmits(['update:formValue']);

let inputTypes = reactive({
  number: [
    "",
    "x",
    "y",
    "sx",
    "sy",
    "ex",
    "ey",
    "r",
    "width",
    "height",
    "padding",
    "lineHeight",
    "lineWidth",
    "maxLine",
    "fontSize",
    "borderWidth",
  ],
  string: ["text", "font", "url", "color", "des"],
  checkbox: ["isRound", "isThroughLine", "isClosure", "isCenter"], // checkbox选择器
  color: ["color", "borderColor", "backgroundColor"], // 颜色选择器
});

let reactValue = computed({
  get() {
    return formValue;
  },
  set(val) {
    emit("update:formValue", val);
  },
});

let inputType = computed(returnInputType);

function returnInputType() {
  for (let key in inputTypes) {
    if (inputTypes[key].includes(type)) {
      return key;
    }
  }
}

const handleSelected = ({ originFiles, rebuildFiles }) => {
  if (originFiles.length) {
    originFiles.map(
      (item, index) => (item.ffid = `${item.name}_${index}_${+new Date()}`)
    );
    emit("update:formValue", rebuildFiles[0].file);
  }
};

let fp = new FilePicker({
  multiple: false,
  accept: "image/*",
  maxSize: 200 * 1024 * 1024,
  onReadFiles: handleSelected,
});

function onImgFileChange(e) {
  fp.handleUploadClick();
}

</script>
<style lang="less" scoped>
input,
select {
  width: 100%;
  box-sizing: border-box;
  margin-top: 10px;
}

input[type="color"] {
  width: 50px;
  height: 50px;
  cursor: pointer;
}

input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.sel_img {
  display: block;
  width: 100%;
  height: auto;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 8px;
  margin-top: 6px;
}
</style>